<template>
    <el-row class="progress" :gutter="46">
        <el-col :span="24" class="title">{{ title }}</el-col>
        <el-col :span="12" class="item">
            <span class="label">日常养护费用：</span>
            <el-progress :text-inside="true" :stroke-width="14" :percentage="everydayPercentage" />
            <span class="value">{{ cost.a }}/{{ cost.b }}(元)</span>
        </el-col>
        <el-col :span="12" class="item">
            <span class="label">专项工程费用：</span>
            <el-progress :text-inside="true" :stroke-width="14" :percentage="specialPercentage" />
            <span class="value">{{ cost.c }}/{{ cost.d }}(元)</span>
        </el-col>
    </el-row>
</template>

<script>
export default {
    name: 'CostProgress',
    props: {
        title: {
            type: String,
            default: '全年预算使用情况'
        },
        cost: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            everydayPercentage: 0,
            specialPercentage: 0
        }
    },
    watch: {
        cost: {
            immediate: true, // 初始化时就执行一次
            handler() {
                this.everydayPercentage = this.cost.b === 0 ? 0 : (this.cost.a > this.cost.b ? 100 : parseInt(this.cost.a / this.cost.b * 100))
                this.specialPercentage = this.cost.d === 0 ? 0 : (this.cost.c > this.cost.d ? 100 : parseInt(this.cost.c / this.cost.d * 100))
            },
            deep: true // 深度监听
        }
    },
}
</script>

<style lang="scss" scoped>
.progress {
    font-size: 14px;
    color: #171725;
    width: 100%;
    max-width: 900px;
    ::v-deep .el-progress {
        margin: 0 8px;
        flex: 1;
    }
    .item {
        align-items: center !important;
        .label {
            font-weight: normal !important;
        }
        .value {
            color: #44444F;
        }
    }
    .title {
        margin-bottom: 16px;
        font-weight: bold;
    }
}
</style>
